<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>
			搜索
		</tn-nav-bar>
		<!-- 页面内容 -->
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="search-conten">
			<view class="search-box">
				<view class="cearch-left">
					<image src="../../static/search.png" class="search-icon"></image>
					<tn-input class="search-input" v-model="title" />
				</view>
				<view class="search-btn" @click="search">搜索</view>
			</view>
			<view class="historical-records" v-if="historiesList.length>0">
				<view class="historical-title">搜索历史</view>
				<view class="historical-delete" @click="deleteHs"><text class="tn-icon-delete"></text><span
						style="font-size: 26rpx;">清空</span></view>
			</view>
			<view class="historical-box">
				<view class="historical-list" v-for="(item,index) in historiesList" :key="index"
					@click="toSearch(item)">{{item.keyword}}</view>
			</view>
			<view class="list-content">
				<view class="title">健康热播</view>
				<block v-for="(item,index) in hotList" :key="index">
					<view :class="index>2?'list-box':'list-box top'" @click="toDetails(item)">
						<image class="list-img" src="../../static/1.png" v-if="index===0"></image>
						<image class="list-img" src="../../static/2.png" v-if="index===1"></image>
						<image class="list-img" src="../../static/3.png" v-if="index===2"></image>
						<view class="sort" v-if="index>2">{{index+1}}</view>
						<view class="list-text">{{item.title}}</view>
						<view :class="index>2?'reading-volume':'reading-volume red-color'">{{item.viewCount}}</view>
					</view>
				</block>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTopContentList,
		histories,
		deleteHistories
	} from '@/util/index.js'
	export default {
		data() {
			return {
				hotList: [],
				title: '',
				historiesList: []
			};
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			this.getHistories()
		},
		methods: {
			getData() {
				getTopContentList({
					page: 1,
					limit: 10
				}).then((res) => {
					this.hotList = res.list
				})
			},
			getHistories() {
				histories({
					page: 1,
					limit: 8
				}).then((res) => {
					this.historiesList = res.list
				})
			},
			search() {
				if(!this.title){
					uni.showToast({
						title:'请输入要搜索的内容后再试！',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url: `./search-list?title=${this.title}`
				})
			},
			toSearch(v) {
				this.title = v.keyword
				this.search()
			},
			deleteHs() {
				deleteHistories({
					id: 0
				}).then((res) => {
					uni.showToast({
						title: '删除成功！',
						icon: 'none'
					})
					this.getHistories()
				})
			},
			toDetails(v) {
				let url;
				switch (v.contentType) { //0:图文,1视频,2:轮播图
					case '0':
						url = `../../articleVideo/Ti-details/Ti-details?id=${v.id}`
						break;
					case '1':
						url = `../../articleVideo/video-details/video-details?id=${v.id}`
						break;
					default:
						url = `../../articleVideo/swiper-details/swiper-details?id=${v.id}`
						break;
				}
				uni.navigateTo({
					url: url
				})
			},

		}
	}
</script>

<style lang="less">
	.search-conten {
		background-color: #FFFFFF;
	}

	.search-box {
		display: flex;
		align-items: center;
		width: 700rpx;
		align-items: center;
		margin: 20rpx auto 0;
		background: #FFFFFF;

		.cearch-left {
			flex: 1;
			border-radius: 120rpx 120rpx 120rpx 120rpx;
			border: 1rpx solid #DCDFE6;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.search-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.search-input {
				// background-color: #eeeeee;
				border-radius: 40rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
				flex: 1;
			}
		}

		.search-btn {
			background-color: #FFFFFF;
			width: 80rpx;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			color: #00C8C8;
		}
	}

	.historical-records {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		line-height: 80rpx;
		font-size: 28rpx;
		padding: 0 20rpx;

		.historical-title {
			color: #666666;
		}

		.historical-delete {
			font-size: 26rpx;
			color: #666666;
		}
	}

	.historical-box {
		display: flex;
		width: 100%;
		align-items: center;
		flex-wrap: wrap;
		font-size: 28rpx;
		padding: 0 20rpx 20rpx 20rpx;

		// border-bottom: 4rpx #eeeeee solid;
		// box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		.historical-list {
			color: #333333;
			margin-right: 25rpx;
			font-weight: 550;
			margin-bottom: 30rpx;
			// background-color: #eeeeee;
			// padding: 5rpx 20rpx;
			// border-radius: 10rpx;
		}
	}

	.list-content {
		// width: 100%;
		padding: 0 20rpx;
		// margin-top: 20rpx;
		// box-shadow: 0 -15rpx 10rpx #ffd3c5;
		// border-radius: 30rpx 30rpx 0 0 ;
	}

	.title {
		width: 100%;
		line-height: 80rpx;
		font-weight: bold;
		color: #666666;
		font-size: 26rpx;
	}

	.list-box {
		display: flex;
		align-items: center;
		width: 710rpx;
		margin: auto;
		height: 80rpx;
		margin-bottom: 20rpx;
		padding: 0 18rpx;
		color: #333333;

		.red-color {
			color: #DB4747 !important;
		}

		// border-bottom: 1rpx #eeeeee solid;
		.list-img {
			width: 44rpx;
			height: 44rpx;
			margin-right: 10rpx;
			display: block;
		}

		.sort {
			width: 44rpx;
			height: 44rpx;
			text-align: center;
			color: #999999;
			margin-right: 10rpx;
		}

		.list-text {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			width: 530rpx;
		}

		.reading-volume {
			font-size: 28rpx;
			width: 70rpx;
			text-align: right;
			margin-left: 20rpx;
			color: #9b9b9b;
		}
	}

	.top {
		background: linear-gradient(90deg, #FDE8DB 0%, #FFFEFE 100%);
		// padding: 0 18rpx 0 6rpx;
	}
</style>
